"use client";
import { gamesNoticeWinApi, GameListRep } from "@/api/home";
import Box from "@/components/Box";
import { Button, Popup } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, useEffect, useState } from "react";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { useRouter } from "@/i18n/routing";
import { getToken } from "@/utils/Cookies";
import { useWalletStore } from "@/stores/useWalletStore";
import useGame from "@/hooks/useGame";
import styles from "@/components/Card/style.module.scss";

interface Props {}

const HomePrize: FC<Props> = () => {
    const t = useTranslations("HomePage");
    const tt = useTranslations("Game");

    const [winImg, setWinImg] = useState<any>([]);
    const gamesNoticeWinRequest = async () => {
        gamesNoticeWinApi()
        .then((res: any) => {
            if (res.code === 200) setWinImg(res.data || []);
        })
    };
    useEffect(() => {
        gamesNoticeWinRequest()
    }, [])

    const [visible, setVisible] = useState(false);
    const [gameInfo, setGameInfo] = useState({});
    const handler = (game: GameListRep) => {
        setVisible(true);
        setGameInfo(game)
        console.log(game)
    };
    
    const router = useRouter();
    const token = getToken();
    const wallet = useWalletStore((state) => state.wallet);
    const { getGameUrl } = useGame();
    const playGameHandler = () => {
        setVisible(true);
        if (!token) {
            router.push("/login?redirect=/");
            return;
        }
        let groupType = 1;
        if (groupType === 1 && Number(wallet.score) + wallet.point <= 0) {
            router.push("/deposit");
            return;
        }

        const params = {
            id: gameInfo.id + "",
            mode: groupType!,
        };
        getGameUrl(gameInfo, params);
    };

    return (
        <div className={"my-[0.0694rem]"}>
            <div className={"mb-[0.0347rem]"}>{t("prize")}</div>
            <Swiper
                slidesPerView={3.2}
                spaceBetween={30}
                pagination={{
                    clickable: true,
                }}
                loop
                autoplay={{
                    delay: 3000,
                }}
                modules={[Autoplay]}
                className="mySwiper"
            >
                {winImg.map((prize: any, index: number) => (
                    <SwiperSlide key={index}>
                        <div className={"w-[1.1rem] bg-[#1c1e22]"} onClick={() => handler(prize)}>
                            <img className={"h-[1.54rem]"} src={prize.game_icon} alt="" />
                            <div className={"px-[0.13rem] pb-[0.0347rem] text-[0.13rem]"}>
                                <p className={"text-[#98a7b5]"}>{prize.phone ? prize.phone.slice(0,3) + '*****' + prize.phone.slice(-3): ''}</p>
                                <p className={"text-[#43c937]"}>R${prize.amount}</p>
                            </div>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false);
                }}
                onClose={() => {
                    setVisible(false);
                }}
                showCloseButton={true}
                getContainer={() => document.querySelector("#app")!}
                bodyStyle={{ background: "#1c1c1c" }}
            >
                <Box className={"w-1/1 flex w-[4.02rem] flex-1"}>
                    <div className={styles.cardWrap} style={{ width: "1.1rem" }}>
                        <img
                            src={gameInfo?.game_icon}
                            alt={gameInfo?.game_name_cn}
                            className={"h-[100%] w-[100%]"}
                        />
                    </div>
                    <div className={styles.cardWrapGmeInfo}>
                        <p className={"h-[0.6rem]"}>{gameInfo?.game_name_cn}</p>

                        <div className={"flex w-[2.2rem] justify-around"}>
                            {/*<Button*/}
                            {/*    onClick={playGameHandler}*/}
                            {/*    className={*/}
                            {/*        "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +*/}
                            {/*        " bg-[#3a3a3a]" +*/}
                            {/*        " font-bold"*/}
                            {/*    }*/}
                            {/*>*/}
                            {/*    {t("demo")}*/}
                            {/*</Button>*/}
                            <Button
                                onClick={playGameHandler}
                                style={{
                                    "--background-color": "#009d80",
                                    "--border-color": "#009d80",
                                }}
                                className={`h-[0.39rem] w-[0.89rem] rounded-[0.05rem] bg-[#] text-[0.15rem] font-bold`}
                            >
                                {tt("join")}
                            </Button>
                        </div>
                    </div>
                </Box>
            </Popup>
        </div>
    );
};

export default HomePrize;